<!-- 水产品行情走势 折线图 -->
<template>
  <div>
    <div class="noProduc" v-show="isShow">当前市场下无产品录入</div>
    <div class="aquaticTrendChart" ref="aquaticTrendChart" id="lineContent"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TMQuaticProduct from "@/api/market-quotation/trading-market-management/tmQuaticProduct.js"; // 交易市场水产品独立接口

export default {
  data () {
    return {
      ctAProduct: {}, // 当前选择的水产品所有基本信息
      dataCTAProduct: [], // 根据日期获取的当前水产品 日期/销量等 信息
      statisticalDate: [], // 当前产品所有销售日期
      dailySales: [], // 当前产品每日销量
      price: [], // 当前产品每日单价
      goodsName: null,
      isShow: false
    };
  },
  created () {
    // this.dateCurrentAProduct() // 根据日期获取当前水产品的数据
  },
  mounted () { },

  methods: {
    // 根据日期获取当前水产品的数据
    dateCurrentAProduct (goodsName, currentAProduct) {
      this.ctAProduct = currentAProduct;  // 当前选择的水产品所有基本信息
      this.goodsName = goodsName;         // 当前选择的水产品名称
      if (!this.ctAProduct) {
        let myChart = echarts.init(this.$refs["aquaticTrendChart"]);
        myChart.dispose();
        return;
      }

      TMQuaticProduct.queryByDate(this.ctAProduct.goodsInMarketId).then(res => {
        // console.log('根据日期获取当前水产品的数据',res);
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.isShow = false
            this.statisticalDate = [0];
            this.dailySales = [0];
            this.price = [0]
            this.aquaticTrendChart();
          } else {
            this.isShow = false;
            this.dataCTAProduct = res.data.sort((a, b) => {
              return (new Date(a.statisticalDate).getTime() - new Date(b.statisticalDate).getTime());
            });
            // console.log("根据日期获取当前水产品的数据this.dataCTAProduct",this.dataCTAProduct);
            this.statisticalDate = [];
            this.dailySales = [];
            // 获取当前水产品所有日期/每日销量/每日单价
            this.dataCTAProduct.forEach(v => {
              this.statisticalDate.push(v.statisticalDate); // 日期
              this.dailySales.push(v.dailySales);           // 销量
              this.price.push(v.price);                     // 每日单价
            });
            this.aquaticTrendChart();
          }
        }
      });
    },
    // 水产品行情走势折现图
    aquaticTrendChart () {
      let machart = echarts.init(this.$refs.aquaticTrendChart);
      let option = {
        // title: {
        //   text: "   30天内数据",
        // },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: [`${this.goodsName}销量`, `${this.goodsName}每日单价`]
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.statisticalDate
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} "
          }
        },
        series: [
          {
            name: `${this.goodsName}每日销量(${this.ctAProduct.unitName})`,
            type: "line",
            data: this.dailySales,
            markPoint: {
              data: [{ type: "max", name: "Max" }, { type: "min", name: "Min" }]
            },
            markLine: {
              // data: [{ type: "average", name: "Avg" }]
            }
          },
          {
            name: `${this.goodsName}每日单价(元)`,
            type: "line",
            data: this.price,
            markPoint: {
              data: [{ type: "max", name: "Max" }, { type: "min", name: "Min" }]
            },
            markLine: {
              // data: [{ type: "average", name: "Avg" }]
            }
          }
        ]
      };
      machart.setOption(option);
    }
  },
  mounted () {
    this.aquaticTrendChart(); // 水产品行情走势图
  }
};
</script>

<style lang="scss" scoped>
/* echarts图表 */
.aquaticTrendChart {
  width: 100%;
  height: 100%;
}

.noProduc {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  padding: 10px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 900;
  border: 1px solid rgb(95, 202, 228);
  background: rgb(248, 227, 227);
  letter-spacing: 10px
}
</style>
